import { requireGroupData, deleteGroupList } from "../vo/request"
import "./start-frame.less"
import { Menu, message } from "antd"
import { useEffect } from "react"
import { useState } from "react"
import { useContext } from "react"
import GroupContext from "./context";
import { DeleteTwoTone } from '@ant-design/icons'
import { Popconfirm } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';

export const List = function ( props:any) {
    let [flag, setFlag] = useState(-1)
    const group = useContext(GroupContext);
    const [state, setState] = useState([{
        groupName: " ",
        groupId: 0,
    }]);

    useEffect(() => {
        (async () => {
            let result = await requireGroupData();
            setState(result.data);  
        })()
    }, []);
    props.setList(state)
    
    return (
        <Menu mode="inline">
            {
                state.map((item: any, index: number) => {
                    return <Menu.Item key={index} onMouseEnter={() => { setFlag(index) }} onMouseLeave={() => { setFlag(-1) }}>
                        <div onClick={
                            () => {
                                group.setGroup(item);
                                props.setModal(Math.random);
                            }
                        } >
                            {item.groupName}
                            <div 
                                style={{ float: "right", display: index === flag ? "block" : "none" }}
                                onClick={(e:any) => {
                                    e.stopPropagation();
                                }}    
                            >
                                <Popconfirm
                                    title="是否确认删除？"
                                    cancelText="取消"
                                    okText="确认"
                                    
                                    onConfirm= {
                                        async () => {
                                           
                                            let res = await deleteGroupList(item.groupId);
                                            if (res.data) {
                                                message.success("删除成功");
                                                let result = await requireGroupData();
                                                setState(result.data);
                                            } else {
                                                message.error("删除失败");
                                            }
                                        }
                                    }
                                    icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
                                >
                                    <DeleteTwoTone style={{ fontSize: "20px" }} />
                                </Popconfirm>

                            </div>
                        </div>

                    </Menu.Item>
                    
                })
            }
        </Menu>
    )
}
